<template>

    <div class="shelf">
        <!--        顶部导航栏-->
        <div class="navBar">

            <div class="navBar-border">

                <div class="navBar-inner">

                    <!--                    图标-->
                    <div class="navBar-icon" @click="goToBookHome">
                        <img src="/images/icon01.png" alt="">
                    </div>

                    <div>
                        <input placeholder="搜索" type="text" class="navBar-input">
                    </div>

                    <button class="navBar-home" @click="goToBookHome">
                        首页
                    </button>

                    <span class="navBar-separator">
                    </span>

                    <button class="navBar-link">
                        传书到手机
                    </button>

                    <span class="navBar-separator">
                    </span>

                    <button class="navBar-link">
                        墨水屏版本
                    </button>

                    <span class="navBar-separator">
                    </span>

                    <button class="navBar-link">
                        手机版
                    </button>

                    <span class="navBar-separator">
                    </span>

                    <div style="position: relative;">
                        <div class="navBar-avatar">
                            <img src="/images/96.jfif"
                                 alt="" style="border-radius: 50%;
    vertical-align: top;">
                        </div>
                    </div>

                </div>

            </div>
        </div>


        <div class="shelf-container">

            <!--        header-->
            <div class="shelf-header">
                <div class="shelf-title">
                    tingzhen
                </div>

                <div class="shelf-accountDetail">
                    会员卡 · 连续包月
                </div>

                <div class="shelf-app">
                    <div class="shelf-app-link">
<span style="display: inline-block;vertical-align: middle;" @click="goToManage">
    下载微信读书 App 管理书架
</span>
                    </div>
                </div>
            </div>

            <div class="shelf-list">

                <!--                小卡片-->
                <div class="shelfBook" v-for="(book, index) in shelfBooks" :key="index">
                    <div class="list-cover">
                        <img :src="book.cover" alt="">

                        <!--                                书籍封面边界装饰-->
                        <span class="borderDecor">
                        </span>
                    </div>

                    <div class="shelfBook-title">
                        {{ book.title }}
                    </div>
                </div>

            </div>

        </div>

    </div>

</template>

<script>
    import axios from "axios";
    import '../mock/mock-shelf.js';

    export default {
        name: "shelf",
        data() {

            return {
                shelfBooks: [],   //我的书架
            };
        },

        mounted() {
            this.fetchShelfBooks();  //我的书架
        },

        methods: {
            // 我的书架
            fetchShelfBooks() {
                axios.get('/api/shelf-books')
                    .then(response => {
                        if (response.data.code === 200) {
                            this.shelfBooks = response.data.data
                            console.log("我的书架：", this.shelfBooks);
                        }
                    })
                    .catch(error => console.error('获取书架数据失败:', error));
            },

            // 跳转主页
            goToBookHome() {
                this.$router.push('/');
            },

            goToManage() {
                this.$router.push('/shelfManage');
            }
        }

    }
</script>

<style scoped>

    .shelf {
        min-height: 100vh;
        margin: 0%;
        background-color: #ffffff;
        width: 100%;
        height: 100%;
    }

    .navBar {
        position: fixed;
        z-index: 80;
        width: 100%;
        height: 72px;
        transition: background-color .2s ease-in-out;
        background-color: #ffffff;
    }

    .navBar-border {
        border-radius: 0;
        border: solid #ebedf1;
        border-width: 0 0 1px;
        height: 100%;
    }

    .navBar-inner {
        max-width: 1120px;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        line-height: 1.5;
    }

    .navBar-icon {
        cursor: pointer;
    }

    .navBar-input {
        color: #c1c8d2;
        margin: 0 20px;
        flex: 1;
        height: 36px;
        padding: 0 36px;
        border-radius: 20px;
        font-size: 14px;
        background-size: 20px 20px;
        background: #f6f7f9 url(https://cdn.weread.qq.com/web/wrwebnjlogic/image/icon_search.5731b0d1.png) no-repeat 12px 8px;
        width: 480px;
        border: 0;

    }

    .navBar-home {
        color: #555a61;
        margin-left: 12px;
        font-size: 16px;
        font-weight: 500;
        opacity: .7;
        text-decoration: none;
    }

    .navBar-home:hover {
        font-weight: 700;
        color: #242e33;
    }

    .navBar-separator {
        background-color: #0d141e;
        display: inline-block;
        width: 1px;
        height: 16px;
        margin-left: 18px;
        opacity: .3;
    }

    .navBar-link {
        margin-left: 12px;
        font-size: 16px;
        font-weight: 500;
        opacity: .7;
        color: #555a61;
    }

    .navBar-link:hover {
        color: #242e33;
        font-weight: 700;
    }

    button {
        background: none;
        border: 0;
        padding: 0;
        text-decoration: none;
        cursor: pointer;
    }

    .navBar-avatar {
        cursor: pointer !important;
        width: 28px;
        height: 28px;
        margin-left: 18px;
        display: inline-block;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 50%;
        border: 1px solid rgba(0, 0, 0, .1);
    }

    img {
        height: 100%;
        width: 100%;
    }

    .shelf-container {
        min-height: 100%;
        box-sizing: border-box;
        position: relative;
        padding-top: 72px;
        max-width: 1120px;
        margin-left: auto;
        margin-right: auto;
    }

    .shelf-header {
        margin-top: 60px;
    }

    .shelf-title {
        color: #212832;
        font-size: 20px;
        font-family: "SourceHanSerifCN-Bold", PingFang SC, -apple-system, SF UI Text, Lucida Grande, STheiti, Microsoft YaHei, sans-serif;
    }

    .shelf-accountDetail {
        color: #5d646e;
        margin-top: 10px;
        font-size: 15px;
        font-family: DIN-Regular, PingFang SC, -apple-system, SF UI Text, Lucida Grande, STheiti, Microsoft YaHei, sans-serif;
    }

    .shelf-app-link {
        color: #212832;
        background-color: #edeeef;
        cursor: pointer;
        display: inline-block;
        font-size: 13px;
        line-height: 18px;
        padding: 8px 20px;
        border-radius: 17px;
        font-weight: 500;
    }

    .shelf-app-link:hover {
        background-color: #e0e0e0;
    }


    .shelf-app {
        float: right;
        margin-top: -35px;
    }

    .shelf-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /*justify-content: space-between;*/
        margin-top: 40px;
        margin-left: -36px;
    }

    .list-cover {
        width: 100%;
        height: 185px;
        display: block;
        /*box-shadow: 0 2px 16px rgba(0, 0, 0, 0.8);*/
        /*background: #d8d8d8;*/
        position: relative;
        cursor: pointer;
    }

    /*小卡片*/
    .shelfBook {
        content-visibility: auto;
        position: relative;
        display: block;
        width: 128px;
        height: auto;
        margin-left: 36px;
        margin-bottom: 44px;
    }

    .shelfBook-title {
        color: #5d646e;
        margin-top: 14px;
        font-size: 15px;
        line-height: 18px;
        overflow: hidden;
        display: -webkit-box;
        display: -moz-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-text-size-adjust: none;
        height: auto;
        max-height: 36px;
    }

</style>
